<template>
  <view class="badge-detail">
    <text class="badge-name">
      {{ badge.badgeName }}
    </text>
    <text class="tips">
      当前总分： {{ count }}
    </text>
    <text class="tips"> 当前等级 </text>
    <view class="badge-img">
      <up-swiper
        :current="curLevelIdx - 1"
        :height="rpx2px(1000)"
        :list="badgeImgList"
        :previousMargin="swiperPreviousMargin"
        :nextMargin="swiperNextMargin"
        keyName="imgUrl"
        :autoplay="false"
        radius="5"
        bgColor="#ffffff"
        imgMode="aspectFit"
        @change="handleBadgeSwiperChange"
      />
    </view>

    <view class="level-process">
      <view class="process-item" v-for="(process, index) in 5" :key="index">
        <view v-if="curLevelIdx <= process" class="item-line grey" />
        <view v-else class="item-line blue">
          <view v-if="process === curLevelIdx - 1" class="out-sq">
            <view class="in-sq" />
          </view>
        </view>
        <text
          :class="process <= curLevelIdx ? 'item-text' : 'item-text-light'"
        >
          LV{{ process }}
        </text>
      </view>
    </view>

    <view class="level-desc">
      <view class="name">
        {{ badge.badgeName.substring(0, badge.badgeName.length - 1)
        }}{{ curLevelIdx }}
      </view>
      <!-- <view class="score" style="text-align: center">
        {{ count }}
      </view> -->
    </view>
  </view>
</template>
<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { getHonorCount } from "@/api/honour/enterprise-detail";
import { getUrlParamsInH5, getUrlParamsInWeixin, rpx2px } from "@/utils/utils";
const badge = ref({});
const currentLevel = ref({});
const badgeImgList = reactive([]);
const curLevelIdx = ref(0);
const count = ref(0);
let swiperPreviousMargin;
let swiperNextMargin;
/* #ifdef MP-WEIXIN */
swiperPreviousMargin = rpx2px(350);
swiperNextMargin = rpx2px(350);
/* #endif */
/* #ifndef MP-WEIXIN */
swiperPreviousMargin = rpx2px(175);
swiperNextMargin = rpx2px(175);
/* #endif */

const handleBadgeSwiperChange = (curSwiperIdx) => {
  curLevelIdx.value = curSwiperIdx.current + 1;
  console.log(curLevelIdx.value);
};
const initData = () => {
  const { badgeName, badgeImageUrl, notBadgeImageUrl } = badge.value;
  const curLevel = badgeName.substr(-1) - 0;
  curLevelIdx.value = curLevel > 0 ? curLevel : 0;
  for (let i = 1; i <= 5; i++) {
    if (i <= curLevel) {
      badgeImgList.push({
        curLevel: curLevel - 1,
        imgUrl: badgeImageUrl,
      });
    } else {
      badgeImgList.push({
        curLevel: i,
        imgUrl: notBadgeImageUrl,
      });
    }
  }
  console.log(badgeImgList, "当前等级---");
};
const getHonorCountNUmber = async () => {
  const res = await getHonorCount();
  let nume = badge.value.badgeName.slice(0, 4);
  let arr = res.data[nume].filter((item) => {
    return item.gradeAs == badge.value.badgeGrade;
  });
  count.value = arr[0].score;
};
onShow(() => {
  /* #ifdef MP-WEIXIN */
  badge.value = JSON.parse(getUrlParamsInWeixin()?.badgeDetail);
  currentLevel.value = badge.value.badgeName.substring(badge.value.badgeName.length - 1, badge.value.badgeName.length)
  /* #endif */
  /* #ifndef MP-WEIXIN */
  badge.value = JSON.parse(getUrlParamsInH5()?.badgeDetail);
  currentLevel.value = badge.value.badgeName.substring(badge.value.badgeName.length - 1, badge.value.badgeName.length)
  /* #endif */
  initData();
  getHonorCountNUmber();
});
</script>
<style scoped lang=less>
.badge-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding-top: 106rpx;
  box-sizing: border-box;
  background-color: @color-origin-white;
  font-family: "ali-p";
  .badge-name {
    font-weight: 500;
    color: @color-deep-blue-text;
    font-size: 40rpx;
  }
  .tips {
    font-size: 20rpx;
    color: @color-grey-text;
    margin-top: 11rpx;
  }
  .badge-img {
    width: 800rpx;
    :deep(.u-swiper__wrapper) {
      // width: 100vw;
      width: 500rpx;
      // .u-swiper__wrapper__item {
      // }
      .u-swiper__wrapper__item__wrapper__image {
        width: 1000rpx !important;
        // height: auto !important;
      }
      .uni-swiper-slides {
        inset: 0 0 !important;
        width: 100%;
      }
    }
  }

  .level-process {
    display: flex;
    width: 100vw;
    padding-left: 102rpx;
    // padding-right: 93rpx;
    box-sizing: border-box;

    .process-item {
      flex: 1;

      .item-line {
        width: inherit;
        height: 9rpx;
        background-color: @color-grey;
        margin-bottom: 20rpx;
      }

      .blue {
        position: relative;
        background-color: @color-deep-blue;
        .out-sq {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          right: -25rpx;
          top: -12.5rpx;
          width: 25rpx;
          height: 25rpx;
          background-color: @color-origin-white;
          border: 3px solid @color-deep-blue;
          transform: rotate(45deg);
          .in-sq {
            width: 10rpx;
            height: 10rpx;
            background-color: @color-deep-blue;
          }
        }
      }

      .item-text {
        font-family: "ali-p";
        font-size: 20rpx;
        color: @color-black;
        color: #4b6cc0;
      }
      .item-text-light {
        font-family: "ali-p";
        font-size: 20rpx;
        color: @color-black;
      }
      &:last-child {
        background-color: transparent;
        .item-line {
          background-color: transparent;
        }
      }
    }
  }
}
</style>
